<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="问题详情"></uni-navbar></view>

		<view class="detail-info" v-show="willInfo.id">
			<view class="com-h2"><view class="h2-title">提交信息</view></view>
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="提交人">
						<!-- block -->
						<view class="input-text">{{ willInfo.createName }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="手机号">
						<!-- block -->
						<view class="input-text">{{ willInfo.phone }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="定位地点">
						<!-- block -->
						<view class="input-text">{{ willInfo.address }}</view>
					</u-form-item>
					
					<u-form-item class="form-item" label="问题标题">
						<!-- block -->
						<view class="input-text">{{ willInfo.title }}</view>
					</u-form-item>
					
					<u-form-item class="form-item" label="正文内容" labelPosition="top">
						<!-- block -->
						<view class="input-text">{{ willInfo.opinionDescribe }}</view>
					</u-form-item>
				</u-form>
			</view>

			<view class="file-list" v-if="fileList.length > 0">
				<view>附件:</view>
				<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
					<view class="file-name clamp">{{ item.name }}</view>
					<view class="right-type">预览</view>
				</view>
			</view>

			<view class="com-h2"><view class="h2-title">提交代表</view></view>
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="代表名称">
						<!-- block -->
						<view class="input-text">{{ willInfo.userName }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="联系网格">
						<!-- block -->
						<view class="input-text">{{ willInfo.streetName }}</view>
					</u-form-item>
				</u-form>
			</view>

			<view class="com-h2"><view class="h2-title">审查结果</view></view>
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="处理意见">
						<!-- block -->
						<view class="input-text">{{ willInfo.nodeStatusName }}</view>
					</u-form-item>
				</u-form>
			</view>
		</view>

		<view v-if="false || hisList"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			typeList: {},
			id: '',
			fileList: [],
			willInfo: {},
			form: {
				type: '',
				idea: '',
				opinion: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option && option.type) {
			this.type = option.type;
		}
		this.loadData();
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.userInfo) {
				this.clientCode = this.userInfo.clientCode;
				this.userId = this.userInfo.userInfo.userId;
			} else {
				// this.$logout();
			}
		},
		loadData() {
			this.$request('/minqingzhitong/msPublicOpinion/get', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					this.$msg('暂无数据');
					return false;
				}
				this.fileList = res.data.fileList;
				this.willInfo = res.data.msPublicOpinion;
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e
			});
		},
		previewImage(list, idx) {
			let urls = [];
			list.forEach((item) => {
				urls.push(this.$imagePreview(item.path));
			});
			uni.previewImage({
				current: idx,
				urls: urls
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.detail-info {
	padding: 0;

	.overflow {
		padding: 20rpx 30rpx;
	}
}

.img-box {
	padding: 20rpx 30rpx 0;
	display: flex;
	flex-wrap: wrap;

	.image {
		padding: 0 20rpx 20rpx 0;
		width: 160rpx;
		height: 160rpx;
	}
}

.form-box {
	.form-item {
		@include mp-flex;

		.input-text {
			width: 100%;
			padding: 11rpx 0;
			line-height: 48rpx;
			text-align: left;
		}
	}
}

.com-h2 {
	border-bottom: 2rpx solid $u-border-color;
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
